<template>
  <div>
    <el-card class="!border-non relative el-card-client" hadow="never">
      <template #header>
        <el-row :gutter="20">
          <el-col :span="4">
            <el-input
              class="input_style"
              v-model="queryParams.title"
              clearable
              placeholder="请输入搜索关键字"
            />
          </el-col>
          <el-col :span="4">
            <el-date-picker
              class="input_time_style"
              v-model="queryParams.create_time"
              type="date"
              placeholder="请选择日期"
              @change="changeTIme"
              clearable
            />
          </el-col>
          <el-col :span="4">
            <el-select
              class="input_style"
              v-model="queryParams.status"
              clearable
              placeholder="请选择状态"
            >
              <el-option
                v-for="(item, index) in dictData.pl_status"
                :key="index"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-col>
          <el-col :span="10">
            <el-button
              type="primary"
              @click="getLists"
              class="btn_style mr_10"
              color="#63ccba"
            >
              <template #icon>
                <el-icon color="#fff">
                  <Search />
                </el-icon> </template
              >搜索
            </el-button>
            <el-button @click="resetParams" class="mr_10">重置</el-button>
            <el-button
              v-perms="['activity.zg_player_comment/add']"
              type="primary"
              @click="handleAdd"
            >
              <template #icon>
                <icon name="el-icon-Plus" />
              </template>
              新增评论
            </el-button>
          </el-col>
          <!-- <el-col :span="2" class="flex justify-end">
            <move-button></move-button>
          </el-col> -->
        </el-row>
      </template>
      <div>
        <el-table
          :data="pager.lists"
          height="calc(100vh - 16rem)"
          border
          stripe
          @selection-change="handleSelectionChange"
          v-loading="pager.loading"
        >
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="活动id" prop="activity_id" align="center" />
          <el-table-column label="标题" prop="title" align="center" />
          <el-table-column label="状态" prop="status" align="center" width="80">
            <template #default="{ row }">
              <el-tag type="success" v-if="row.status == '1'">
                <dict-value :options="dictData.pl_status" :value="row.status" />
              </el-tag>
              <el-tag type="danger" v-else-if="row.status == '2'">
                <dict-value :options="dictData.pl_status" :value="row.status" />
              </el-tag>
              <el-tag type="warning" v-else>
                <dict-value :options="dictData.pl_status" :value="row.status" />
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="选手"
            prop="player_name"
            align="center"
            width="80"
          />
          <el-table-column label="是否匿名" prop="is_anonymous" align="center">
            <template #default="{ row }">
              <el-tag type="success" v-if="row.is_anonymous == '1'">
                <span>已匿名</span>
              </el-tag>
              <el-tag type="success" v-else-if="row.is_anonymous == '0'">
                <span>未匿名</span>
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="评论人" prop="nickname" align="center" />
          <el-table-column label="评分" prop="score" align="center" width="120">
            <template #default="{ row }">
              <el-rate
                v-model="row.score"
                :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
                disabled
                show-score
                text-color="#ff9900"
              />
            </template>
          </el-table-column>
          <el-table-column label="评论" prop="content" align="center" />
          <!-- <el-table-column label="操作" width="120" fixed="right" align="center">
                        <template #default="{ row }">
                            <el-button v-perms="['activity.zg_player_comment/edit']" type="primary" link
                                @click="handleEdit(row)">
                                编辑
                            </el-button>
                            <el-button v-perms="['activity.zg_player_comment/delete']" type="danger" link
                                @click="handleDelete(row.id)">
                                删除
                            </el-button>
                        </template>
          </el-table-column>-->
        </el-table>
      </div>
      <div class="position">
        <pagination v-model="pager" @change="getLists" />
      </div>
    </el-card>
    <edit-popup
      v-if="showEdit"
      ref="editRef"
      :dict-data="dictData"
      @success="getLists"
      @close="showEdit = false"
    />
  </div>
</template>

<script lang="ts" setup name="zgPlayerCommentLists">
import { usePaging } from "@/hooks/usePaging";
import { useDictData } from "@/hooks/useDictOptions";
import {
  apiZgPlayerCommentLists,
  apiZgPlayerCommentDelete,
} from "@/api/zg_player_comment";
import { timeFormat } from "@/utils/util";
import feedback from "@/utils/feedback";
import EditPopup from "./edit.vue";
import moveButton from "@/components/moveButton/index.vue";
import { format } from "echarts/core";
const editRef = shallowRef<InstanceType<typeof EditPopup>>();
// 是否显示编辑框
const showEdit = ref(false);

// 查询条件
const queryParams = reactive({
  title: "",
  create_time: "",
  is_real: "",
  status: "",
});

// 改时间格式
const changeTIme = (val: number) => {
  queryParams.create_time = val ? timeFormat(val, "yyyy-mm-dd") : "";
};

// 选中数据
const selectData = ref<any[]>([]);

// 表格选择后回调事件
const handleSelectionChange = (val: any[]) => {
  selectData.value = val.map(({ id }) => id);
};

// 获取字典数据
const { dictData } = useDictData("pl_status");

// 分页相关
const { pager, getLists, resetParams, resetPage } = usePaging({
  fetchFun: apiZgPlayerCommentLists,
  params: queryParams,
});

// 添加
const handleAdd = async () => {
  showEdit.value = true;
  await nextTick();
  editRef.value?.open("add");
};

// 编辑
const handleEdit = async (data: any) => {
  showEdit.value = true;
  await nextTick();
  editRef.value?.open("edit");
  editRef.value?.setFormData(data);
};

// 删除
const handleDelete = async (id: number | any[]) => {
  await feedback.confirm("确定要删除？");
  await apiZgPlayerCommentDelete({ id });
  getLists();
};

getLists();
</script>
